<template>
    <div class="list">
        <div class="top" v-show="state === '-1'">
            <section><input ref="checkAll" type="checkbox" @change="checkAll">全选</section>
            <span>删除选中</span>
        </div>
        <ul>
            <li v-for="item in list" :key="item.id">
                <h3>{{item.name}}</h3>
                <div class="price">商品价格：{{item.price}}</div>
                <div class="goods_sub">
                    <section>商品描述：{{item.subscribe}}</section>
                    <input v-if="state === '-1'" type="checkbox" v-model="item.check">
                    <button v-else>{{state | hasState}}</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: '',
    data() { 
        return {
            list: [],
            state: '-1'
        }
    },
    filters: {
        hasState(val) {
            let text = ''
            switch(val) {
                case "0":
                    text = "去付款"
                break;
                case "1":
                    text = "发货"
                break;
                 case "2":
                    text = "收货"
                break;
                 case "3":
                    text = "再来一单"
                break;
            }
            return text
        }
    },
    computed: {
        ...mapState([
            'orders'
        ])
    },
    created() {
        this.filterData()
        this.state = this.$route.params.state
    },
    methods:{
        filterData() {
            if(this.$route.params.state === '-1') {
                this.list = this.orders
            } else {
               this.list = this.orders.filter(item => {
                    return item.state == this.$route.params.state
                })
            }
            
        },

        // 全选事件
        checkAll(e) {
            this.list.forEach(item => {
                item.check = e.target.checked
            })
        }
    },

    watch: {
        orders() {
            this.filterData()
        },

        list: {
            deep: true,
            handler(val) {
                var flag = true // 标记是否所有订单都被选中
                val.forEach(item => {
                    if(!item.check) {
                        flag = false
                    }
                })
                this.$refs.checkAll.checked = flag

            }
        }
    }
}
</script>

<style scoped lang="scss">
    .list {
        width: 100%;
        height: 100%;
        overflow: auto;
        .top {
            display: flex;
            height: 50px;
            justify-content: space-between;
            align-items: center;
            span {
                color: green;
            }
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            li{
                background-color: #fff;
                padding: 15px 10px;
                margin-bottom: 20px;
                h3 {
                    margin: 0;
                }
                .price {
                    margin: 15px 0;
                }
                .goods_sub {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
</style>